<template>
  <div class="forgetpswphone-wrap">
    <div class="loginbyphone-content-wrap">
      <div class="title">{{ $t('找回密码') }}</div>
      <el-form
        :model="formData"
        ref="formData"
        label-width="0"
        class="demo-ruleForm"
        @submit.native.prevent
      >
        <p class="email">{{ $t('手机号') }}</p>
        <el-form-item
          prop="phone"
          :rules="[{ required: true, message: $t('手机号不能为空') }]"
        >
          <el-input
            :placeholder="$t('请输入手机号')"
            v-model="formData.phone"
          ></el-input>
        </el-form-item>
        <p class="email">{{ $t('验证码') }}</p>
        <div class="input-box">
          <el-form-item
            prop="code"
            :rules="[{ required: true, message: $t('验证码不能为空') }]"
            ><el-input
              :placeholder="$t('请输入验证码')"
              v-model="formData.code"
            ></el-input
          ></el-form-item>
          <p class="input-slot">
            <span v-if="!sending" @click="sendMsg">{{ $t('获取验证码') }}</span>
            <span v-else>{{ sendCount }}{{ $t('s后重试') }}</span>
          </p>
        </div>
        <el-form-item
          ><button
            class="my-button"
            @click="validateCode"
          >
            {{ $t('验证') }}
          </button></el-form-item
        >
      </el-form>
    </div>
    <div class="check-email-button-wrap">
      <img src="../../assets/img/email.png" @click="checkEamil" alt="" />
    </div>
  </div>
</template>
<script>
import api from '@/api/login'
export default {
  data() {
    return {
      formData: {
        phone: '',
        code: '',
      },
      sending: false,
      sendCount: 0,
    }
  },
  methods: {
    checkEamil() {
      this.$router.replace('/forgetpswemail')
    },
    async validateCode() {
      let hasErr = false
      this.$refs['formData'].validateField(['phone', 'code'], (err) => {
        if (err) {
          hasErr = true
          return
        }
      })
      if (!hasErr) {
        let params = {
          mobile: this.formData.phone,
          scene: 4,
          code: this.formData.code,
        }
        let url = api.validateCode
        let res = await this.$http.post(url, params)
        if (res && res.code == 0) {
          this.$message.success(this.$t('验证成功'))
          this.$store.state.resetPhone = this.formData.phone
          this.$store.state.resetCode = this.formData.code
          this.$store.state.resetBy = 'phone'
          this.$router.push('/resetpsw')
        } else {
          this.$message.error(res.msg || this.$t('网络错误'))
        }
      }
    },
    async sendMsg() {
      return this.$refs.formData.validateField('phone', async (err) => {
        if (err) {
        } else {
          let res = await this.$http.post(api.sendMsg, {
            mobile: this.formData.phone,
            scene: 4,
          })
          if (res && res.code == 0) {
            this.$message.success(this.$t('发送成功'))
            if (this.sending) {
              return
            } else {
              this.sending = true
              this.sendCount = 60
              let timer = setInterval(() => {
                this.sendCount--
                if (this.sendCount <= 0) {
                  clearInterval(timer)
                  this.sending = false
                }
              }, 1000)
            }
          } else {
            this.$message.error(res.msg || this.$t('网络错误'))
          }
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.forgetpswphone-wrap {
  width: 32rem;
  background: #ffffff;
  border-radius: 0.35rem;
  margin: 1.8rem auto 1.8rem auto;
  padding: 1rem;
  overflow: hidden;
  box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
}
.loginbyphone-content-wrap {
  width: 18rem;
  margin: 0 auto;
}
.title {
  font-weight: bold;
  font-size: 0.95rem;
  color: #333333;
  margin-bottom: 0.5rem;
  text-align: center;
}
.email {
  font-size: 0.75rem;
  color: #333333;
  margin-top: 0.5rem;
  margin-bottom: 0.15rem;
}
.tips {
  font-size: 0.75rem;
  color: #666666;
  line-height: 0.9rem;
  text-align: center;
  margin-top: 0.4rem;
  span {
    text-decoration: underline;
    cursor: pointer;
  }
}
.check-login-way {
  font-size: 0.75rem;
  color: #045fb2;
  line-height: 0.9rem;
  text-align: right;
  margin-top: 0.4rem;
  span {
    text-decoration: underline;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    border-radius: 0.15rem;
    &:hover {
      background-color: #f0f8ff;
    }
  }
}
.input-box {
  position: relative;
  .input-slot {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    cursor: pointer;
    color: #045fb2;
    padding: 0.15rem 0.4rem;
    border-radius: 0.15rem;
    background-color: #f0f8ff;
    &:hover {
      background-color: #e1f0ff;
    }
  }
}
.check-email-button-wrap {
  width: 0;
  height: 0;
  border-top: 3.7rem solid #c4e3ff;
  border-left: 3.7rem solid transparent;
  position: absolute;
  right: 0;
  top: 0;
  img {
    width: 1.4rem;
    height: 1.4rem;
    cursor: pointer;
    top: -3.4rem;
    left: -1.7rem;
    position: relative;
  }
}
.router-box {
  font-size: 0.6rem;
  color: #425f9b;
  margin-top: 0.4rem;
  text-align: center;
  span:nth-child(2) {
    text-decoration: underline;
    color: #045fb2;
    margin-left: 0.7rem;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    border-radius: 0.15rem;
    &:hover {
      background-color: #f0f8ff;
    }
  }
  .forget-box {
    text-decoration: underline;
    color: #045fb2;
    cursor: pointer;
    margin-left: 0.7rem;
    // padding: 0.1rem 0.25rem;
    border-radius: 0.15rem;
    &:hover {
      background-color: #f0f8ff;
    }
  }
}
</style>
<style lang="scss">
.forgetpswphone-wrap {
  .el-input {
    .el-input__inner {
      width: 100%;
      border-color: #dcdfe6;
      height: 2.56rem !important;
      font-size: 0.75rem;
      background: #fafafa;
      padding: 0 0.6rem;
      border-radius: 0.15rem;
      &:focus {
        border-color: #045fb2;
        box-shadow: 0 0 0 0.08rem rgba(4, 95, 178, 0.1);
        background: #ffffff;
      }
    }
  }
  .my-button {
    margin: 0.5rem auto 0 auto;
    width: 18rem;
    height: 3rem;
    font-size: 0.8rem;
    background: #045fb2;
    border-color: #045fb2;
    border-radius: 0.15rem;
    color: white;
    font-weight: 500;
    letter-spacing: 0.05rem;
    cursor: pointer;
    display: block;
    &:hover {
      background: #034a8c;
      border-color: #034a8c;
      box-shadow: 0 0.08rem 0.3rem rgba(4, 95, 178, 0.3);
    }
  }
  .el-form-item {
    margin-bottom: 0.3rem;
  }
  .el-form-item__error {
    font-size: 0.65rem;
    padding-top: 0.1rem;
  }
}
</style>
